<template>
    <div>
        <h1>人员列表</h1>
        <h3 style="color: blue">count组件的求和：{{ sum }}</h3>
        <input placeholder="请输入姓名" type="text" v-model="name">
        <button @click="addPerson(name)">添加</button>
        <ul>
            <li v-for='person in personList' :key='person.id'>{{ person.name }}</li>
        </ul>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import {nanoid} from 'nanoid'

    export default {
        name: 'Person',
        data() {
            return {
                name: ''
            }
        },
        computed: {
            ...mapState(['personList', 'sum']),
        },
        methods: {
            addPerson() {
                const p = {id: nanoid(), name: this.name}
                this.$store.commit('ADD_PERSON', p)
                this.name = ''
            },
            /*   ...mapMutations(['addPerson'])*/
        }
    }

</script>

<style scoped>

</style>